Support the new Slack data visualization block (line, bar, area, pie)#91
Merged
Conversation
…arts) Adds the new Slack data_visualization Block Kit block introduced in the 2026-06-16 Block Kit release. - Types: DataVisualizationBlock plus DataVizChart (cartesian line/bar/area via series + axis_config, and pie via segments) added to the Block union. - Renderer: a dependency-free inline-SVG chart component covering line, grouped bar, stacked-style area, and pie. Handles multi-series, negative values (zero baseline), "nice" auto-scaled Y ticks, axis/category labels, a color-swatch legend, and Slack's accessible aria-label patterns. Works in both light and dark mode. - Affordances: a "view as table" toggle and a CSV download, mirroring Slack's chart action buttons (SSR-safe). - Docs/playground: readme Supported Blocks row and a charts fixture. - Tests: renders the Block Kit example fixtures and locks in the h3 title, aria-labels, legend, axis labels, negative handling, and pie percentages. https://claude.ai/code/session_018T7Lik8eFCV8DMtTckZC6a
Add the Alert, Card, and Carousel rows that were missing from the readme, note the Header block's `level` (H1–H4) support, and realign the table now that "Data Visualization" is the widest block name. https://claude.ai/code/session_018T7Lik8eFCV8DMtTckZC6a
Contributor
|
👋 Thanks for the PR, @StephenTangCook! You can try these changes live, before any release — no install needed. 🛝 Playground: https://slack-block-to-jsx-playground.vercel.app/ Paste the build URL into the Library package field (or hit the pkg.pr #91 preset) and click Load build — your blocks render against this exact PR. 🎉 |
commit: |
Collaborator
Author
|
@themashcodee I'm loving the preview feature. Could we make it even easier by making the library package a configurable query param?? :) Then this PR comment could give you a one-click preview URL. |
- Line and area charts now use monotone-cubic (Fritsch–Carlson) interpolation
for smooth curves that never overshoot the data (safe for negatives).
- Hover behavior matching Slack:
- line/bar show a tooltip with the category and every series value, plus a
dashed vertical guide at the nearest category; line/area also mark each
series' value at that point.
- pie shows a tooltip for the hovered segment, and the slice expands outward
from the pie center.
- All interactivity is client-side and SSR-safe (default render is unchanged).
https://claude.ai/code/session_018T7Lik8eFCV8DMtTckZC6a
StephenTangCook
force-pushed
the
claude/wizardly-turing-k9ucct
branch
from
e31d020 to
4e2e246
Compare
…eadme types Review follow-ups: - Memoize CartesianChart's hover-independent geometry (domain, ticks, scales, and the monotone-cubic path strings) with useMemo keyed on [model, type], so pointer-move re-renders no longer rebuild the spline paths. - Extract a shared SeriesStroke component; the line and area branches no longer duplicate the identical stroked-path markup. - readme: list the remaining exported block types (Table, Alert, Card, Carousel, Data Visualization) in the TypeScript example. https://claude.ai/code/session_018T7Lik8eFCV8DMtTckZC6a
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds support for Slack's new
data_visualizationBlock Kit block, introduced in the 2026-06-16 Block Kit release (block reference). The block renders data as line, bar, area, or pie charts.Slack draws these with ECharts → SVG. To stay consistent with the rest of this library (alert / card / carousel are all hand-rolled), the renderer uses dependency-free inline SVG — no charting library is added.
What's included
DataVisualizationBlockplusDataVizChart(cartesianline/bar/areaviaseries+axis_config, andpieviasegments), added to theBlockunion and exported for consumers.aria-labelpatterns (e.g. "Line chart: … There are 2 series: Desktop and Mobile.", "Pie chart: …, with 4 segments. Segments: Free (52%), …")level(H1–H4) support.test/data_visualization.test.mjsrenders the Block Kit example payloads and locks in the<h3>title, aria-labels, legend, axis labels, negative-value handling, pie percentages, and the smooth-curve paths.Validation
Ran the full CI sequence locally against the lockfile-pinned deps:
lint(tsc) clean →buildsucceeds → 16/16 tests pass.Notes
https://claude.ai/code/session_018T7Lik8eFCV8DMtTckZC6a
Generated by Claude Code